{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '编辑器:example/editor/index', 'ckeditor 5'])}
<style>
    .ck.ck-content:not(.ck-comment__input *) {
        height: 300px;
        overflow-y: auto;
    }
    [data-theme='dark'] .ck.ck-toolbar,
    [data-theme|='translucent'] .ck.ck-toolbar,
    [data-theme='dark'] .ck.ck-editor__main>.ck-editor__editable,
    [data-theme|='translucent'] .ck.ck-editor__main>.ck-editor__editable,
    [data-theme='dark'] .ck.ck-toolbar .ck.ck-toolbar__separator,
    [data-theme|='translucent'] .ck.ck-toolbar .ck.ck-toolbar__separator {
        background-color: rgba(var(--bs-white-rgb), .2);
    }
    [data-theme='dark'] .ck.ck-toolbar,
    [data-theme|='translucent'] .ck.ck-toolbar,
    [data-theme='dark'] .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused),
    [data-theme|='translucent'] .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
        border-color: rgba(var(--bs-white-rgb), .2);
    }
    [data-theme='dark'] .ck.ck-dropdown__panel,
    [data-theme|='translucent'] .ck.ck-dropdown__panel {
        background-color: rgba(var(--bs-white-rgb), .2);
        border-color: rgba(var(--bs-white-rgb), .2);
        backdrop-filter: blur(10px);
    }
    [data-theme='dark'] .ck.ck-list,
    [data-theme|='translucent'] .ck.ck-list {
        background-color: transparent;
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">富文本编辑器ckeditor 5</div>
        </header>
        <div class="card-body">
        
        <p>该示例是ckeditor 5，使用的是Classic editor版本。因为很多功能是以插件形式存在的，这里的版本如果存在你想要却没有的功能，大家可以去官网定制：<a href="https://ckeditor.com/ckeditor-5/online-builder/" target="_blank">https://ckeditor.com/ckeditor-5/online-builder/</a></p>
        <div class="callout callout-info mb-3">注意：这里编辑器的高度，是用css来控制的，默认不设置的话高度是auto的，这里演示用，设置为300px。</div>
        <div id="editor"></div>
        
        </div>
      </div>
  </div>

</div>

<script>
    var myLayerIndex;
    function receiveDataForEditor(url){
        layer.close(myLayerIndex);
        var arr = url.split(',');
        editor.execute( 'insertImage', {
            source:  arr
        } );
    }
    $(function () {
        editor = ClassicEditor
        .create( document.querySelector( '#editor' ), {
            // toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
            placeholder: '欢迎使用后台管理模板!',
            language: 'zh-cn'
        } )
        .then( editor => {
            $('.ck-file-dialog-button input').remove();
            var dom = $('.ck-file-dialog-button').html();
            var span = `<span class="ck-file-dialog-button-new">${dom}</span>`;
            $('.ck-file-dialog-button').after(span);
            $('.ck-file-dialog-button').remove();
            $('.ck-file-dialog-button-new').on('click', function () {
                myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=receiveDataForEditor&multiple=1", function (){});
            });
            window.editor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );
    });
    
    </script>